<template>
  <view class="artwork-detail-page">
    <!-- 自定义导航栏 -->
    <u-navbar title="作品详情" :bgColor="'#fff'" height="50" fixed placeholder :leftIconColor="'#333'"
      @leftClick="handleBack">
      <template #left>
        <u-icon name="arrow-left" color="#333" size="18"></u-icon>
      </template>
      <!-- <template #right>
        <u-icon name="share" color="#333" size="20" @click="shareArtwork"></u-icon>
      </template> -->
    </u-navbar>

    <!-- 加载状态 -->
    <view v-if="loading" class="loading-container">
      <u-loading-icon mode="circle" size="24"></u-loading-icon>
      <text class="loading-text">加载中...</text>
    </view>

    <view class="content" v-else>
      <!-- 作品标题和作者 -->
      <view class="artwork-header">
        <text class="artwork-title">{{ artworkDetail.title }}</text>
        <view class="artwork-artist-info">
          <text class="artwork-artist">{{ artworkDetail.artist }}</text>
          <text class="artwork-date">{{ artworkDetail.date }}</text>
        </view>
      </view>

      <!-- 作品简介 -->
      <view class="artwork-description">
        <view class="section-title">
          <u-icon name="file-text" color="#333" size="18"></u-icon>
          <text>作品简介</text>
        </view>
        <text class="description-text">{{ artworkDetail.description }}</text>
      </view>

      <!-- 作品图片 -->
      <view class="artwork-image-section">
        <image :src="artworkDetail.image" class="artwork-image" mode="widthFix" @click="previewImage"></image>
        <view class="image-overlay" @click="previewImage">
          <u-icon name="eye" color="#fff" size="24"></u-icon>
          <text class="overlay-text">点击查看大图</text>
        </view>
      </view>

      <!-- 作者其他作品 -->
      <view class="other-works-section" v-if="otherWorks.length > 0">
        <view class="section-title">
          <u-icon name="grid" color="#333" size="18"></u-icon>
          <text>作者其他作品</text>
        </view>
        <!-- 使用横向滚动视图 -->
        <scroll-view class="other-works-scroll" scroll-x="true" show-scrollbar="false">
          <view class="other-works-list">
            <view v-for="(work, index) in otherWorks" :key="work.id" class="other-work-item" @click="goToArtworkDetail(work.id)">
              <image :src="work.image" class="other-work-image" mode="aspectFill"></image>
              <view class="other-work-info">
                <text class="other-work-name">{{ work.title }}</text>
                <text class="other-work-date">{{ work.date }}</text>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>

      <!-- 点赞和收藏 -->
      <view class="artwork-actions">
        <view class="action-item" @click="toggleLike">
          <u-icon :name="isLiked ? 'heart-fill' : 'heart'" :color="isLiked ? '#ff6b6b' : '#999'"
            size="20"></u-icon>
          <text :class="['action-text', { liked: isLiked }]">{{
            artworkDetail.likes
          }}</text>
        </view>
        <view class="action-item" @click="toggleFavorite">
          <u-icon :name="isFavorited ? 'bookmark-fill' : 'bookmark'" :color="isFavorited ? '#4ecdc4' : '#999'"
            size="20"></u-icon>
          <text :class="['action-text', { favorited: isFavorited }]">收藏</text>
        </view>
        <view class="action-item" @click="shareArtwork">
          <u-icon name="share" color="#999" size="20"></u-icon>
          <text class="action-text">分享</text>
        </view>
      </view>
    </view>
    
    <!-- 图片预览组件 -->
    <image-preview 
      v-model="showPreview" 
      :urls="[artworkDetail.image]" 
      :current="0"
      @close="showPreview = false"
    />
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import ImagePreview from '@/components/image-preview/image-preview.vue';
import api from '@/api/index.js'
import { useRequest } from "alova/client";

// 响应式数据
const artworkId = ref("");
const isLiked = ref(false);
const isFavorited = ref(false);
const currentUserId = ref('user123'); // 当前用户ID
const showPreview = ref(false); // 控制图片预览显示
const loading = ref(false); // 加载状态

// 作品详情数据
const artworkDetail = reactive({
  id: 1,
  title: "兰亭序",
  artist: "王羲之",
  date: "东晋",
  likes: 856,
  image: "https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg",
  description: '《兰亭序》是东晋书法家王羲之的代表作，被誉为"天下第一行书"。作品记述了王羲之与友人在会稽山阴兰亭聚会的盛况，抒发了对人生无常的感慨。全文共324字，章法自然，笔法多变，是书法艺术的巅峰之作。'
});

// 作者其他作品数据
const otherWorks = ref([
  {
    id: 2,
    title: '十七帖',
    date: '东晋',
    image: 'https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg'
  },
  {
    id: 3,
    title: '黄庭经',
    date: '东晋',
    image: 'https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg'
  },
  {
    id: 4,
    title: '乐毅论',
    date: '东晋',
    image: 'https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg'
  },
  {
    id: 5,
    title: '快雪时晴帖',
    date: '东晋',
    image: 'https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg'
  },
  {
    id: 6,
    title: '丧乱帖',
    date: '东晋',
    image: 'https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg'
  },
  {
    id: 7,
    title: '孔侍中帖',
    date: '东晋',
    image: 'https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg'
  }
])

// 页面加载时获取参数
onLoad((options) => {
  if (options.id) {
    artworkId.value = options.id;
    loadArtworkDetail(options.id);
  }
});

// 返回上一页
const handleBack = () => {
  const pages = getCurrentPages();
  if (pages.length > 1) {
    uni.navigateBack();
  } else {
    uni.switchTab({
      url: "/pages/index/index",
    });
  }
};

// 加载作品详情
const loadArtworkDetail = async (id) => {
  loading.value = true;
  try {
    // 调用API获取作品详情
    const result = await useRequest(Apis.artwork.getArtworkDetail(id));
    console.log("加载作品详情成功:", result);
    
    // 更新作品详情数据
    Object.assign(artworkDetail, result);
    
    // 加载作者其他作品
    // 这里可以根据实际需求调用获取作者其他作品的接口
  } catch (error) {
    console.error("加载作品详情失败:", error);
    uni.showToast({
      title: "加载失败",
      icon: "error"
    });
  } finally {
    loading.value = false;
  }
};

// 分享作品
const shareArtwork = () => {
  uni.showActionSheet({
    itemList: ["分享到微信", "分享到朋友圈", "复制链接"],
    success: (res) => {
      const actions = ["微信好友", "朋友圈", "复制链接"];
      uni.showToast({
        title: `分享到${actions[res.tapIndex]}`,
        icon: "success",
      });
    },
  });
};

// 点赞作品
const toggleLike = async () => {
  try {
    if (isLiked.value) {
      // 取消点赞
      await Apis.artwork.unlikeArtwork(artworkDetail.id);
      artworkDetail.likes--;
      uni.showToast({
        title: "取消点赞",
        icon: "none",
      });
    } else {
      // 点赞
      await api.artwork.likeArtwork(artworkDetail.id);
      artworkDetail.likes++;
      uni.showToast({
        title: "点赞成功",
        icon: "success",
      });
    }
    isLiked.value = !isLiked.value;
  } catch (error) {
    console.error("点赞操作失败:", error);
    uni.showToast({
      title: "操作失败",
      icon: "error"
    });
  }
};

// 收藏作品
const toggleFavorite = async () => {
  try {
    if (isFavorited.value) {
      // 取消收藏
      await Apis.artwork.unfavoriteArtwork(artworkDetail.id);
      uni.showToast({
        title: "取消收藏",
        icon: "none",
      });
    } else {
      // 收藏
      await Apis.artwork.favoriteArtwork(artworkDetail.id);
      uni.showToast({
        title: "收藏成功",
        icon: "success",
      });
    }
    isFavorited.value = !isFavorited.value;
  } catch (error) {
    console.error("收藏操作失败:", error);
    uni.showToast({
      title: "操作失败",
      icon: "error"
    });
  }
};

// 跳转到其他作品详情页面
const goToArtworkDetail = (artworkId) => {
  // 关闭当前页面并跳转到新的作品详情页面
  uni.redirectTo({
    url: `/gallery_pages/artwork/artwork-detail?id=${artworkId}`
  });
};

// 预览图片
const previewImage = () => {
  showPreview.value = true;
};
</script>

<style lang="scss" scoped>
.artwork-detail-page {
  min-height: 100vh;
  background: #f5f6fa;
  position: relative;
}

.content {
  padding: 20rpx 30rpx;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  
  .loading-text {
    margin-top: 20rpx;
    font-size: 28rpx;
    color: #666;
  }
}

.artwork-header {
  margin-bottom: 30rpx;

  .artwork-title {
    display: block;
    font-size: 40rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 16rpx;
  }

  .artwork-artist-info {
    display: flex;
    align-items: center;
    gap: 20rpx;

    .artwork-artist {
      font-size: 30rpx;
      color: #666;
      font-weight: 500;
    }

    .artwork-date {
      font-size: 26rpx;
      color: #999;
    }
  }
}

.artwork-image-section {
  margin-bottom: 30rpx;
  position: relative;
  border-radius: 20rpx;
  overflow: hidden;

  .artwork-image {
    width: 100%;
    border-radius: 20rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
  }
  
  .image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    
    .overlay-text {
      color: #fff;
      font-size: 28rpx;
      margin-top: 10rpx;
    }
  }
  
  .artwork-image-section:hover .image-overlay,
  .artwork-image-section:active .image-overlay {
    opacity: 1;
  }
}

.section-title {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin-bottom: 24rpx;

  text {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
  }
}

.artwork-description {
  margin-bottom: 40rpx;

  .description-text {
    font-size: 28rpx;
    color: #666;
    line-height: 1.6;
  }
}

.other-works-section {
  margin-bottom: 40rpx;
  
  .other-works-scroll {
    width: 100%;
    white-space: nowrap;
    
    .other-works-list {
      display: inline-flex;
      padding: 10rpx 0;
      
      .other-work-item {
        width: 280rpx;
        margin-right: 20rpx;
        background: #fff;
        border-radius: 15rpx;
        overflow: hidden;
        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
        
        &:last-child {
          margin-right: 0;
        }
        
        .other-work-image {
          width: 100%;
          height: 200rpx;
        }
        
        .other-work-info {
          padding: 15rpx;
          
          .other-work-name {
            display: block;
            font-size: 26rpx;
            color: #333;
            margin-bottom: 8rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          
          .other-work-date {
            font-size: 22rpx;
            color: #999;
          }
        }
      }
    }
  }
}

.artwork-actions {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 40rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);

  .action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12rpx;

    .action-text {
      font-size: 24rpx;
      color: #999;

      &.liked,
      &.favorited {
        color: #333;
      }
    }
  }
}
</style>